//Vue
import Vue from "vue";
//根组件
import App from "./App.vue";
//路由
import router from "./router";
//布局配置
import store from "@/core/services/store";
//请求封装
import ApiService from "@/core/services/api.service";
//数据处理
import {VERIFY_AUTH} from "@/core/services/store/auth.module";
//布局处理
import {RESET_LAYOUT_CONFIG} from "@/core/services/store/config.module";
//关闭调试信息
Vue.config.productionTip = false;
//第三方插件
import "popper.js";
import "tooltip.js";
//滚动条
import PerfectScrollbar from "perfect-scrollbar";
window.PerfectScrollbar = PerfectScrollbar;
//一种将文本复制到剪贴板的方法
import ClipboardJS from "clipboard";
window.ClipboardJS = ClipboardJS;
//引入vue-i18n
import VueI18n from 'vue-i18n'
//通过插件的形式挂载
Vue.use(VueI18n);
//国际化插件
import i18n from "@/core/plugins/vue-i18n";
//Vuetify是一个基于vue2.0，为移动而生的组件框架，一个渐进式的UI框架；旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。
//Vuetify支持SSR(服务端渲染)，SPA(单页应用程序)，PWA(渐进式web应用程序)和标准HTML页面。
import vuetify from "@/core/plugins/vuetify";
//PortalVue是一组两个组件，让用户可以在文档中的任何位置（甚至在Vue应用程序控制的部分之外）呈现组件模板。
import "@/core/plugins/portal-vue";
/**
 * 采用 BootstrapVue 构建响应式、移动优先、ARIA项目（Accessible Rich Internet Application，可访问的富媒体应用，即无障碍友好应用)，
 * 基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4
 * Bootstrap v4全球最受欢迎的前端框架，移动优先并基于flexbox弹性布局，用于构建响应式网页。
 * Vue.js 是用于构建前端应用的渐进式框架，基于Node和webpack。
 */
import "@/core/plugins/bootstrap-vue";
//完美滚动条
import "@/core/plugins/perfect-scrollbar";
//高亮显示代码
import Highlight from "@/core/plugins/highlight";
Vue.use(Highlight);
//inline svg是目前前端图标解决方案的最优解（当然不仅限于图标），而且使用方式也及其简单，只要将svg图标代码当成普通的html元素来使用即可
import "@/core/plugins/inline-svg";
//交互式开源图表
import "@/core/plugins/apexcharts";
/**
 * vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。
 * 支持嵌套选项的单选和多选
 * 模糊匹配
 * 异步搜索
 * 延迟加载（仅在需要时加载深度选项的数据）
 * 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
 * 丰富的选项和高度可定制的
 * 支持 多种浏览器
 */
import "@/core/plugins/treeselect";
//封装的工具类
import "@/core/plugins/metronic";
//图标
import "@mdi/font/css/materialdesignicons.css";
//表单验证
import "@/core/plugins/formvalidation";
//API服务初始化
ApiService.init();
/**
 * 导航守卫 前置守卫
 *
 * “to”: 即将要进入的目标 路由对象;（这个对象中包含name，params，meta等属性）
 * "from": 当前导航正要离开的路由对象；（这个对象中包含name，params，meta等属性）
 * “next”: Function: 确保要调用 next 方法，否则钩子就不会被 resolved。这个当中还可以传一些参数，具体可以看官方文档。
 */
router.beforeEach((to, from, next) => {
    //将配置重置为初始状态
    store.dispatch(RESET_LAYOUT_CONFIG).then(() =>
        //延迟加载器
        setTimeout(() => {
            /**
             * 确保我们在每个页面加载之前检查了token
             * Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
             */
            Promise.all([store.dispatch(VERIFY_AUTH)])
                .then(next)
                .catch(() => {
                    this.$router.push({name: "login"}).then(() =>
                        /**
                         * 滚动到文档中的一组特定坐标
                         * 支持：
                         *  Chrome、Chrome Android、Edge、Firefox、IE 4、Opera 4、Safari、Safari iOS
                         */
                        window.scrollTo(0, 0));
                });
        }, 100)
    );
});
new Vue({
    router,
    store,
    i18n,
    vuetify,
    render: h => h(App)
}).$mount("#app");
